<template>
    <div>
       <div class="chart-main-title">
                    <h3>社区聊天室(<span id="userNumber"></span>人)<span id="currentUser"></span></h3>
                </div>
                <div class="chart-list" id="chart-list"  > 
                  <div  v-if="array.length">
                  <!-- <div class="chart-item"  v-for="i in array.length"  :key='i'>
                        <div class="user-face"><img :src="`/img/${array[i-1].avatar}`" alt=""></div>
                        <div  style='font-size:14px'>{{array[i-1].name}}</div>
                        <div  class='sj'></div>
                        <div class="user-message">{{array[i-1].text}}</div>
                    </div> -->
                    </div>
       </div>
       <div class="chart-form">
                    <div  class='div1'><textarea class="chart-form-message" id="message"></textarea></div>
                    <div><input type="button" id="send"      class="chart-form-send" value="发送"></div>
                </div>
    </div>
</template>

<script>
import  io  from '/node_modules/socket.io/client-dist/socket.io'
export default {
  data() {
    return {
      array:[]
    }
  },
  mounted () {
    this.load()
  },
  methods: {
  load() {
    let  name='李世民'
    let avatar='cdsz.png'
    var array=this.array
        // 建立websocket连接
        // let socket=io('http://121.4.247.63:3010')
        let socket=io('http://localhost:3010')
        console.log('连接建立成功',socket);
        // 接收服务器发回来的更新人数的消息
        socket.on('countmsg',function(data){
            userNumber.innerHTML=data
        },
            // 接收服务端发回的消息
            socket.on('textmsg',function(data){
                console.log('服务端返回',data);
                array.push(data)
                console.log('array:',array);
                // 将data显示在聊天区
                   let list=document.getElementById('chart-list')
                list.innerHTML+=`<div class="chart-item">
                        <div class="user-face"><img src="/img/${data.avatar}" alt=""></div>
                        <div  style='font-size:12px'>${data.name}</div>
                        <div class="user-message">${data.text}</div>
                    </div>`
                    // 使list元素的滚动条持续保持在最底部
                    list.scrollTop=list.scrollHeight
                    
            }),
            
        // 点击按钮，发送消息
        send.onclick=function(){
            let val=message.value
            if(val.trim()==''){   //trim（）去除两端空白的字符串
                return
            }
            // 发消息
            socket.emit('textmsg',{text:val,name,avatar})
            // 清空文本
            message.value=''
            message.focus()
        })
      
    }
  },
};
</script>

<style lang="scss" >
.chart-main-title{
  background-color: #10c5f0;
}
.chart-main-title h3{
  margin: 0;
  line-height: 80px;
  padding-left: 20px;
}
.chart-form{
  width: 100%;
display: flex;
justify-content: space-around;
position: fixed;
bottom: 72px;

}
.div1{
  width: 70%;
  
}
.div1 textarea{
  width: 100%;
  border-radius: 10px;
}
#send{
  height: 42px;
  width: 80px;
   border-radius: 10px;
}
 .chart-list{
  height: calc(100vh - 150px) ;
  background-color:#f5f5f5 ;
 overflow:scroll;
}
 .chart-item{
  margin: 10px;
  position: relative;
  height: 50px;
}
 .user-face{
  width: 50px;
  height: 50px;
  border-radius: 25px;
  overflow: hidden;
  background-color:#10c4f0;
  position: absolute;
  left: 0;
  top:0;
}
 .user-face+div{
  padding-left: 60px;
}
 img{
  width: 100%;
}
 .sj{
  border:5px solid transparent ;
  border-right: 5px solid white;
  position: absolute;
  left: 50px;
  top:25px;
}
 .user-message{
  position: absolute;
  left:60px;
  top:25px;
  background-color: white;
  line-height: 30px;
  }
</style>